@for $i from 1 through 6 {
.grid-#{$i} {
width: 100px*$i;
}
}
$alarmRgb: 255, 213, 0;
$infoRgb: 25, 97, 166;
$warnRgb: 240, 111, 50;
$errorRgb: 228, 35, 38;
$successRgb: 0, 149, 52;
$pulseList:(
alarm: $alarmRgb,
info: $infoRgb,
warn: $warnRgb,
error: $errorRgb,
success: $successRgb
);
@each $key, $val in $pulseList {
@keyframes pulse-#{$key} {
0% {
box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(unquote(#{$val}), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0);
}
}
}